<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HMR研究</title>
</head>
<body>
    <div id="title">HMR研究</div>
    
    <div class="less_block">
        1. js一修改，默认刷新所有，
        <input />
    </div>
    
    <div class="less_block">
        2. 打包css, less资源文件，此处需要loader的支持</p>
        style-loader, css-loader, less-loader <br/>

        MiniCssExtractPlugin提取css成单独文件的，但是安装不成功，可能是兼容性问题了
    </div>
    
    <div class="less_block">
        html就一个文件，就不要去热加载设定了</br>
        html变化了，整体自然会刷新的
    </div>

    <div class="less_block">
        4. 打包picture也是可以的，需要loader </p>
        a. css中引入图片：需要url-loader</br>
        超过limit大小图片，保留原图
        <div id="hero"> </div>
        小于limit大小图片，压缩为base64
        <div id="serven"> </div>
        b. img中插入图片: 需要先经过html-loader处理，然后是url-loader 
        <div>
            <img src="./imgs/xiaowu.png">
        </div>
    </div>
    
    <div class="less_block">
        5. 打包media, 字体等，此处暂时省略不讨论了
    </div>

    <div class="less_block">
        6. 为了方便开发者模式，可以配置 devServer; </p>
        devServer只会在内存中编译打包，不会产生build文件夹
    </div>
</body>
</html>